<div class="login_main">
    <div class="login_box">
        <div class="left">
            <span class="logo_container">
                <img data-v-dfb96b82="" src="../assets/img/hauyne.png" alt="logo" class="logo">
            </span>
            <span class="title">HAUYNE</span>
            <span class="about">hauyne是一个基于Spring Cloud（Hoxton.SR12版本）、Spring Boot 2.x，Spring Security OAuth2，Angular 20 & NG-ZORRO UI 库 的前后端分离 权限管理系统</span>
        </div>
        <div class="right">
            <nz-spin [nzSpinning]="isSpinning">
                <form nz-form [formGroup]="loginForm" class="login-form" (ngSubmit)="login()">
                    <div class="form-header">
                        <span>系统登录</span>
                    </div>

                    <!-- 用户名 -->
                    <nz-form-item>
                        <nz-form-control nzErrorTip="请输入用户名!">
                            <nz-input-group nzPrefixIcon="user" nzSize="large">
                                <input type="text" nz-input formControlName="username" placeholder="用户名"/>
                            </nz-input-group>
                        </nz-form-control>
                    </nz-form-item>

                    <!-- 密码 -->
                    <nz-form-item>
                        <nz-form-control nzErrorTip="请输入密码!">
                            <nz-input-group nzPrefixIcon="lock" [nzSuffix]="suffixTemplate" nzSize="large">
                                <input
                                    nz-input
                                    formControlName="password"
                                    [type]="passwordVisible ? 'text' : 'password'"
                                    placeholder="密码"
                                />
                            </nz-input-group>
                            <ng-template #suffixTemplate>
                                <i nz-icon class="toggle-pwd-btn" [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
                                   (click)="passwordVisible = !passwordVisible"></i>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>

                    <!-- 图形验证码 -->
                    <nz-form-item>
                        <nz-col [nzSpan]="12">
                            <nz-form-control nzErrorTip="请输入验证码">
                                <nz-input-group nzSize="large" nzPrefixIcon="lock">
                                    <input nz-input type="text" formControlName="captcha" placeholder="验证码"
                                           maxlength="4"/>
                                </nz-input-group>
                            </nz-form-control>
                        </nz-col>
                        <nz-col [nzSpan]="12" style="text-align: center !important;">
                            <nz-form-control>
                                <img nz-image [nzSrc]="base64ImageCode" alt=""
                                     (click)="refreshImgCode()"
                                     [nzDisablePreview]="true"
                                     title="点击切换验证码"
                                     class="ant-form-item-control-input-content"
                                     style="max-height:40px; border: 1px solid #b0b9c6"
                                />
                            </nz-form-control>
                        </nz-col>
                    </nz-form-item>

                    <button nz-button class="login-form-button login-form-margin" nzSize="large">登&nbsp;&nbsp;录
                    </button>
                </form>
            </nz-spin>
        </div>
    </div>
</div>
